<!-- 死页面-栏目流量 -->
<template>
  <el-button type="primary" @click="setting()" style="margin-bottom: 10px;">设置</el-button>
  <div style="display: flex; flex-wrap: wrap;background-color: #fff;padding:20px;">
    <div style="width: 58%;margin-right: 2%;">
      <div id="month" style="height:450px;width:100%"></div>
    </div>
    <div style="width: 40%;">
      <div id="week" style="height:450px;width:100%"></div>
    </div>
    <div style="width: 100%;">
      <div id="date" style="height:450px;width:100%"></div>
    </div>
  </div>
  <el-dialog v-model="visible" title="设置" @close="visible=false" width="30%">
    <div>
      设置阈值
      <el-input v-model="threshold" style="width: 240px;"></el-input>
    </div>
    <div>
      设置通知人员
      <el-checkbox-group v-model="checkList">
        <el-checkbox v-for="i in userList" :label="i.realName" :value="i.id" />
      </el-checkbox-group>
    </div>
    <template #footer>
      <el-button @click="visible=false">取消</el-button>
      <el-button type="primary" @click="submit()">确定</el-button>
    </template>
  </el-dialog>
</template>
        
<script setup lang="ts">
import { ref, reactive, onMounted, nextTick,onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { getAllUser } from '@/api/allApi'
import * as echarts from 'echarts'

onMounted(() => {
	init()
})
const threshold = ref(40)
// 在 script setup 顶部添加
const monthEchart = ref(null)
const weekEchart = ref(null)
const dateEchart = ref(null)
const init = () => {
	//月
	monthEchart.value = echarts.init(document.getElementById('month'))
	var monthOption = {
		tooltip: {},
		toolbox: {
			show: true,
			feature: {
				saveAsImage: { title: '导出' }
			}
		},
		title: [
			{
				text: '十二月流量统计',
				textStyle: {
					fontSize: 20
				}
			}
		],
		legend: { top: 'top' },
		xAxis: {
			type: 'category',
			data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '平台产品',
				type: 'line',
				data: [10, 20, 30, 13, 21, 45, 3, 15, 28, 35, 12, 25],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '开源产品',
				type: 'line',
				data: [21, 33, 15, 18, 20, 27, 16, 14, 10, 5, 16, 22],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '行业产品',
				type: 'line',
				data: [15, 14, 10, 16, 23, 28, 26, 23, 15, 27, 30, 19],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '行业动态',
				type: 'line',
				data: [16, 26, 24, 21, 11, 18, 18, 22, 25, 16, 30, 33],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '公司动态',
				type: 'line',
				data: [5, 18, 26, 31, 34, 31, 21, 26, 13, 18, 20, 16],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '公司简介',
				type: 'line',
				data: [12, 27, 5, 34, 18, 9, 22, 31, 7, 15, 29, 3],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '联系我们',
				type: 'line',
				data: [20, 37, 11, 25, 33, 19, 6, 30, 14, 23, 38, 21],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
		]
	}
	monthEchart.value.setOption(monthOption)
	//周
	weekEchart.value = echarts.init(document.getElementById('week'))
	var weekOption = {
		tooltip: {},
        toolbox: {
			show: true,
			feature: {
				saveAsImage: { title: '导出' }
			}
		},
        grid:{right:'25%',},
		title: [
			{
				text: '近四周流量统计',
				textStyle: {
					fontSize: 20
				}
			}
		],
		legend: { right: 'right',top:'40px' },
		xAxis: {
			type: 'category',
			data: ['一', '二', '三', '四']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '平台产品',
				type: 'bar',
				data: [10, 20, 30, 13, 21, 45, 3, 15, 28, 35, 12, 25],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '开源产品',
				type: 'bar',
				data: [21, 33, 15, 18, 20, 27, 16, 14, 10, 5, 16, 22],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '行业产品',
				type: 'bar',
				data: [15, 14, 10, 16, 23, 28, 26, 23, 15, 27, 30, 19],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '行业动态',
				type: 'bar',
				data: [16, 26, 24, 21, 11, 18, 18, 22, 25, 16, 30, 33],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '公司动态',
				type: 'bar',
				data: [5, 18, 26, 31, 34, 31, 21, 26, 13, 18, 20, 16],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
            {
				name: '公司简介',
				type: 'bar',
				data: [2, 8, 6, 3, 3, 5, 2, 6, 3, 8, 10, 12],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
            {
				name: '联系我们',
				type: 'bar',
				data: [6, 7, 3, 2, 1, 4, 5, 9, 8, 7, 10, 11],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
		]
	}
	weekEchart.value.setOption(weekOption)
	//日
	dateEchart.value = echarts.init(document.getElementById('date'))
	var dateOption = {
		tooltip: {},
        toolbox: {
			show: true,
			feature: {
				saveAsImage: { title: '导出' }
			}
		},
		title: [
			{
				text: '近30天流量统计',
				textStyle: {
					fontSize: 20
				}
			}
		],
		legend: { top: 'top' },
		xAxis: {
			type: 'category',
			data: [
				'1',
				'2',
				'3',
				'4',
				'5',
				'6',
				'7',
				'8',
				'9',
				'10',
				'11',
				'12',
				'13',
				'14',
				'15',
				'16',
				'17',
				'18',
				'19',
				'20',
				'21',
				'22',
				'23',
				'24',
				'25',
				'26',
				'27',
				'28',
				'29',
				'30'
			]
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: '平台产品',
				type: 'line',
				data: [12, 34, 7, 21, 35, 28, 9, 37, 16, 22, 5, 30, 19, 48, 23, 11, 39, 26, 14, 31, 3, 33, 20, 37, 29, 8, 36, 17, 24, 25],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '开源产品',
				type: 'line',
				data: [31, 15, 30, 6, 27, 38, 13, 49, 22, 10, 35, 4, 24, 36, 18, 32, 1, 13, 2, 30, 21, 17, 50, 9, 28, 37, 14, 22, 5, 33],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '行业产品',
				type: 'line',
				data: [25, 19, 14, 12, 36, 8, 29, 31, 16, 3, 39, 22, 28, 7, 30, 15, 15, 21, 10, 38, 2, 37, 18, 34, 13, 10, 6, 32, 27, 23],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '行业动态',
				type: 'line',
				data: [11, 26, 12, 17, 35, 9, 28, 16, 14, 3, 20, 23, 39, 5, 31, 19, 37, 12, 38, 25, 8, 14, 20, 37, 16, 33, 4, 33, 29, 21],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '公司动态',
				type: 'line',
				data: [30, 18, 25, 13, 37, 6, 29, 13, 21, 7, 11, 26, 38, 11, 34, 19, 37, 15, 39, 24, 10, 26, 22, 38, 17, 34, 3, 35, 28, 22],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '公司简介',
				type: 'line',
				data: [12, 27, 5, 34, 18, 9, 22, 31, 7, 15, 29, 3, 20, 37, 11, 25, 33, 19, 6, 30, 14, 23, 38, 2, 17, 26, 35, 10, 21, 4],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			},
			{
				name: '联系我们',
				type: 'line',
				data: [6, 34, 21, 9, 28, 17, 37, 4, 25, 12, 30, 19, 33, 8, 22, 15, 39, 1, 27, 14, 32, 10, 24, 36, 3, 20, 29, 16, 38, 13],
				markLine: {
					data: [
						{
							yAxis: threshold.value,
							name: '阈值',
							lineStyle: {
								color: 'red'
							},
							label: {
								formatter: '阈值: ' + threshold.value
							}
						}
					]
				},
				itemStyle: {
					normal: {
						color: function (params) {
							return params.value > threshold.value ? 'red' : params.color
						}
					}
				}
			}
		]
	}
	dateEchart.value.setOption(dateOption)

    // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize)
}
// 添加 resize 处理函数
const handleResize = () => {
  if (monthEchart.value) monthEchart.value.resize()
  if (weekEchart.value) weekEchart.value.resize()
  if (dateEchart.value) dateEchart.value.resize()
}
// 在组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (monthEchart.value) monthEchart.value.dispose()
  if (weekEchart.value) weekEchart.value.dispose()
  if (dateEchart.value) dateEchart.value.dispose()
})
const visible = ref(false)
const userList = ref([])
const checkList = ref([])
const setting = () => {
	getAllUser().then(res => {
		userList.value = res.data.list
		visible.value = true
	})
}
const submit = () => {
	setTimeout(() => {
		visible.value = false
		ElMessage.success('设置成功！')
		init()
	}, 500)
}
</script>
        
<style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
	width: max-content;
	display: inline-block;
}
</style>
        